<template>
  <div class="gaode-demo2">
    <div class="map-wrap">
      <div class="show-info">
        zoom：{{gaode.zoom}}
        <hr>
        高德地图用的 GCJ02 坐标
      </div>
      <div class="map-container">
        <div class="map" :id="gaodeMapId"/>
      </div>
    </div>
    <div class="map-wrap">
      <div class="show-info">
        zoom：{{baidu.zoom}}
      </div>
      <div class="map-container">
        <div class="map" :id="baiduMapId"/>
      </div>
    </div>
  </div>
</template>

<script>
  import {gcj02ToBd09} from '@/common/lonlat-convertor';
  import gaodeMap from '@/common/gaode-map';
  import baiduMap from '@/common/baidu-map';

  export default {
    name: 'GaodeDemo2',
    data () {
      return {
        gaodeMapId: `map${Number.parseInt(Math.random() * 999999, 10)}`,
        baiduMapId: `map${Number.parseInt(Math.random() * 999999, 10)}`,
        gaodeMap: null,
        baiduMap: null,
        centerPoint: [106.477127, 29.669512],
        gaode: {
          zoom: 18
        },
        baidu: {
          zoom: 19
        }
      };
    },
    mounted () {
      this.$nextTick(() => {
        this.initGaodeMap();
        this.initBaiduMap();
      });
    },
    methods: {
      initGaodeMap () {
        const AMap = window.AMap;
        const amap = gaodeMap.initMap(this.gaodeMapId, this.centerPoint, this.gaode.zoom);
        this.gaode.zoom = amap.getZoom();
        // 缩放事件，结束触发
        amap.on('zoomend', () => {
          this.gaode.zoom = amap.getZoom();
        });

        // 添加一个点
        const marker = new AMap.Marker({
          map: amap,
          position: this.centerPoint
        });

        this.gaodeMap = amap;
      },
      initBaiduMap () {
        const BMap = window.BMap;
        const bmap = baiduMap.initMap(this.baiduMapId, this.centerPoint, this.baidu.zoom);
        this.baidu.zoom = bmap.getZoom();

        // 缩放事件，结束触发
        bmap.addEventListener('zoomend', () => {
          this.baidu.zoom = bmap.getZoom();
        });

        // 添加一个点
        const centerPoint = this.centerPoint;
        const point = gcj02ToBd09(centerPoint[0], centerPoint[1]);
        const marker = new BMap.Marker(new BMap.Point(point.lon, point.lat));
        bmap.addOverlay(marker);

        this.baiduMap = bmap;
      }
    }
  };
</script>

<style scoped>
</style>
